<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta th:replace="frontend/fragment/style"/>
    <title th:text="${settings.website_title+' - '+settings.menu_mine}"></title>
    <style>
        #profile-body {
            min-height: 660px;
            margin-top: 100px;
        }

    </style>
</head>
<body class="simple">
<div id="profile-app">
    <bmy-header-mini :params="params" :st="false" :bodyid="bodyId" :show-small="false"
                     :mine="current"></bmy-header-mini>
    <hr class="header-hr">
    <div id="profile-body" class="layui-container animated fadeInUp">
        <div class="layui-tab layui-tab-brief" lay-filter="mine-tab">
            <ul class="layui-tab-title">
                <template v-for="(about,index) in abouts">
                    <li :class="liStyle(index)"><i :class="iStyle(about.tab)"></i> {{about.name}}</li>
                </template>
            </ul>
            <div class="layui-tab-content">
                <template v-for="(about,index) in abouts">
                    <div class="layui-tab-item" :class="{'layui-show': index == 0,'layui-text': index!=0}"
                         v-html="about.content"></div>
                </template>
            </div>
        </div>
    </div>
    <bmy-footer :words="params.footer_words"></bmy-footer>
    <bottom-nav :params="params" :layui-element="elem"></bottom-nav>
</div>
<div th:replace="frontend/fragment/script"></div>
<script th:inline="javascript">
    layui.use('element', function () {
        BMY.aboutVm = new Vue({
            el: "#profile-app",
            data: {
                params: [[${settings}]]
                , su: [[${su}]]
                , current: true
                , bodyId: "profile-body"
                , elem: layui.element
                , abouts: [[${abouts}]]
            }
            , methods: {
                liStyle: function (index) {
                    if (index === 0) {
                        return "layui-this";
                    }
                }
                , iStyle: function (tab) {
                    if (tab === "about_me") {
                        return "fa fa-user";
                    }
                    if (tab === "about_blog") {
                        return "fa fa-book";
                    }
                    if (tab === "about_website") {
                        return "fa fa-chrome";
                    }
                }
            }, mounted: function () {
                bottomNav();
            }
        })
    })

</script>
</body>
</html>